<script src="@/js/wenhua/shengxiao.js"></script>

<template>

  <div class="shengxiao">
    <div class="margins">

      <!-- 面包屑导航 -->
      <el-affix :offset="80">
        <div class="navigation">
          <Breadcrumb separator=">">
            <BreadcrumbItem to="/">
              <Icon type="ios-home" />
              首页
            </BreadcrumbItem>
            <BreadcrumbItem to="/wenhua">
              <Icon type="logo-buffer" />
              文化
            </BreadcrumbItem>
            <BreadcrumbItem>
              <Icon type="md-pin" />
              生肖
            </BreadcrumbItem>
          </Breadcrumb>
        </div>

        <!-- 猜你想看 -->
        <div class="prediction">
          猜你想看：
          <router-link to="/wenhua/yinyang">
            阴阳
            <Icon type="ios-open-outline" />
          </router-link>
        </div>

        <!-- 分割线 -->
        <div class="divider">
          <el-divider />
        </div>
      </el-affix>

      <!-- 数据 -->
      <div class="data">
        <el-row :gutter="10">
          <el-col :span="3">
            <el-affix :offset="125">
              <el-card shadow="never" class="left">
                <div>
                  <button class="introduce-button" @click="pageTable = 0">
                    基础介绍
                    <span v-show="pageTable === 0">
                      <Icon type="ios-arrow-dropright-circle" />
                    </span>
                  </button>
                </div>
                <br />
                <div>
                  <button class="details-button" @click="pageTable = 1">
                    详细解读
                    <span v-show="pageTable === 1">
                      <Icon type="ios-arrow-dropright-circle" />
                    </span>
                  </button>
                </div>
              </el-card>
            </el-affix>
          </el-col>
          <el-col :span="21">
            <el-card shadow="always" class="right">
              <div v-show="pageTable === 0" class="content">
                <div>
                  <el-tag size="large" round type="info" effect="dark">
                    <span>何谓生肖？</span>
                  </el-tag>
                </div>
                <div>
                  生肖也称为属相，是中国传统文化中的一种记年方式，是一种十二年一个循环的纪年系统，每年用一种动物来代表，是由十二地支演变而来，
                  即：<b><u>鼠、牛、虎、兔、龙、蛇、马、羊、猴、鸡、狗、猪</u></b>。
                </div>
                <br /><br />
                <div>
                  <el-tag size="large" round type="info" effect="dark">
                    <span>生肖的起源</span>
                  </el-tag>
                </div>
                <div>
                  <div>
                    据湖北云梦睡虎地和甘肃天水放马滩出土的秦简可知，先秦时期即有比较完整的生肖系统存在。最早记载与现代相同的十二生肖的传世文献是东汉王充的《论衡》。
                  </div>
                </div>
                <br /><br />
                <div>
                  <el-tag size="large" round type="info" effect="dark">
                    <span>生肖文化</span>
                  </el-tag>
                </div>
                <div>
                  <div>
                    生肖文化在中国历史中占据了重要的地位，它不仅仅是一种民俗符号，更是中华民族文化不可分割的一部分。每一个生肖都有其独特的象征意义和文化内涵，这些象征意义和文化内涵在人们的生活中发挥着重要的作用。
                  </div>
                  <br />
                  <div>
                    体现了人们对和谐社会的追求。在十二生肖中，每一个动物都有其独特的性格和特点，但它们却能和谐共处，共同构成一个完整的体系。这种和谐共处的精神，也体现在人们的社会生活中，倡导相互尊重、和谐共处的社会风尚。
                  </div>
                  <br />
                  <div>
                    在现代社会中，随着科技的发展和文化的多元化，生肖文化的影响力可能在一定程度上有所减弱。但尽管如此，它依然是中国文化的重要组成部分，被广大人民所珍视和传承。
                  </div>
                </div>
              </div>
              <div v-show="pageTable === 1" class="content">
                <div>
                  <el-input clearable maxlength="1" show-word-limit v-model="queryData" style="width: 300px"
                    placeholder="请输入生肖名称（如：鼠）">
                    <template #prefix>
                      <el-icon>
                        <Edit />
                      </el-icon>
                    </template>
                  </el-input>
                  <span>
                    &nbsp;
                    <Button icon="ios-search" @click="">搜索</Button>
                  </span>
                  <span class="page">
                    <el-pagination small background class="pageList" :pager-count="3" :page-sizes="[10, 30, 50, 70, 90]"
                      layout="total, sizes, prev, pager, next, jumper" :total="dataTotal" :current-page.sync="page"
                      :page-size="pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
                  </span>
                  <div class="divider">
                    <el-divider />
                  </div>
                </div>

                <div v-show="data && data.length !== 0">
                  <div v-for="item in data" :key="item" class="for">
                    <el-card shadow="hover">
                      <div class="name">【<b v-html="showDataMethod(item.name)"></b>】</div>

                      <div>
                        <b>取数： </b>
                        {{ item.number }}
                      </div>
                      <div>
                        <b>寓意： </b>
                        {{ item.moral }}
                      </div>
                      <div>
                        <b>五行：</b>
                        {{ item.wuXing }}
                      </div>
                      <div>
                        <b>地支：</b>
                        {{ item.diZhi }}
                      </div>
                      <div>
                        <b>时辰：</b>
                        {{ item.shiChen }}
                      </div>
                      <div>
                        <b>三合： </b>
                        {{ item.sanHe }}
                      </div>
                      <div>
                        <b>六合： </b>
                        {{ item.liuHe }}
                      </div>
                      <div>
                        <b>六冲： </b>
                        {{ item.liuChong }}
                      </div>
                      <br />
                      <div>
                        <b>本命楼层： </b>
                        {{ item.louCengBm }}
                      </div>
                      <div>
                        <b>财富楼层： </b>
                        {{ item.louCengCf }}
                      </div>
                      <div>
                        <b>贵人楼层： </b>
                        {{ item.louCengGr }}
                      </div>
                      <div>
                        <b>忌讳楼层： </b>
                        {{ item.louCengJi }}
                      </div>
                      <br />
                      <div>
                        <b>吉利颜色： </b>
                        {{ item.colorAuspicious }}
                      </div>
                      <div>
                        <b>忌讳颜色： </b>
                        {{ item.colorUnfortunate }}
                      </div>

                      <div class="index">
                        {{ item.id }}
                      </div>
                    </el-card>
                  </div>
                </div>
                <div v-show="data.length === 0" class="null">
                  暂无数据
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

    </div>
  </div>

</template>

<style lang="less" scoped src="@/css/wenhua/shengxiao.scss"></style>
